<template>
	<div class="auto-loading-wrap">
		<div class="auto-loading-title">
			<img src="/img/logo.svg" class="auto-loading-logo" alt="Logo">
			<div>{{props.loadingText||appName}}</div>
		</div>
		<div class="auto-loading-item">
			<div class="auto-loading-outter"></div>
			<div class="auto-loading-inner"></div>
		</div>
	</div>
</template>
<script lang="ts" setup>
// 定义props接收的字段
const props =defineProps({
	loadingText: {type:String, default:null, required:false},
})
//data
const appName = import.meta.env.VITE_APP_NAME

</script>
<style scoped lang="scss">
.auto-loading-wrap {
	height:100vh;
	width: 100vw;
	overflow: auto;
	display: flex;
	flex-direction: column; justify-content: center;
	align-items: center;
	background-image: url(/img/bg-loading.svg);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 100%;
	position: relative;
}
.auto-loading-title {
	font-size: 20px;
	text-align: center;
	margin-top:-40px;
	.auto-loading-logo {
		width: 100px;
		margin: 0 auto 15px auto;
	}
}
.auto-loading-item {
	position: absolute;
	width:260px;
	height:260px;
	margin-top:-40px;
	vertical-align: middle;
	border-radius: 50%;
}
.auto-loading-outter {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 6px solid var(--primary-color);
	border-bottom: 0;
	border-left-color: transparent;
	border-radius: 50%;
	animation: loader-outter 1.2s cubic-bezier(.42,.61,.58,.50) infinite;
}
.auto-loading-inner {
	position: absolute;
	top: calc(50% - 116px);
	left: calc(50% - 116px);
	width:232px;
	height:232px;
	border: 6px solid var(--secondary-color); opacity: .5;
	border-right: 0;
	border-top-color: transparent;
	border-radius: 50%;
	animation: loader-inner 1.2s cubic-bezier(.42,.61,.58,.50) infinite;
}

@-webkit-keyframes loader-outter {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loader-outter {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes loader-inner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}

@keyframes loader-inner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}
</style>